<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/pagination.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/pagination.min.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/config.js"></script>
</head>
<script type="text/html" id="itemTemplate">
    <tr>
        <td>
            <input type="checkbox" name="" lay-skin="primary" class="checkBoxInput">
            <div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
        </td>
        <td class="pro-id-class">{{proId}}</td>
        <td class="pro-content-class">{{problem}}</td>
        <td>{{grade}}</td>
        <td class="td-manage">
            <button class="layui-btn layui-btn-normal layui-btn-xs" id="modifyBtn"><i class="layui-icon">&#xe642;</i>修改
            </button>
        </td>
    </tr>
</script>
<body>

<div class="layui-fluid" id="toload">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>删除</button>
                    <button class="layui-btn" onclick="xadmin.open('添加题目','./question-add.html',600,400)"><i
                            class="layui-icon"></i>添加
                    </button>
                    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                       onclick="location.reload()" title="刷新">
                        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" lay-filter="checkall" name="" lay-skin="primary">
                            </th>
                            <th>ID</th>
                            <th>内容</th>
                            <th>年级</th>
                            <th>操作</th>
                        </tr>

                        </thead>

                        <tbody id="problems-lists">

                        </tbody>

                    </table>
                    <div id="lists-navi"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>

    $(function () {
        if (localStorage.getItem('toLoadPage') === null) {
            localStorage.setItem('toLoadPage',1);
        }
        var totalEle = 0;
        var itemTemplateSrc = $('#itemTemplate').html();
        function getItemHTML(input) {
            // console.log(photo);
            return microTemplate(itemTemplateSrc, input);
        }

        function microTemplate(src, data) {
            // replace {{tags}} in source
            return src.replace(/\{\{([\w\-_\.]+)\}\}/gi, function (match, key) {
                // walk through objects to get value
                var value = data;
                key.split('.').forEach(function (part) {
                    value = value[part];
                });
                return value;
            });
        }

        $.ajax({
            url: hostStr + "problem/bgm?pageSize=10&pageNum=1",
            type: "get",
            dataType: "json",
            async:false,
            success: function (res) {
               totalEle = res.params.problems.totalElements;
            }
        });

        var container = $('#lists-navi');
        container.pagination({
            dataSource: hostStr + 'problem/bgm?',
            locator: function () {
                return 'params.problems.content';
            },
            totalNumber: totalEle,
            pageNumber:localStorage.getItem('toLoadPage'),
            pageSize: 10,
            callback: function (response, pagination) {
                var itemsHTML = response.map(getItemHTML).join('');
                $("#problems-lists").html(itemsHTML);
                //每次刷新后都存储当前页面
                localStorage.setItem('currentPage', $('#lists-navi').pagination('getSelectedPageNum'));
                $('tbody checkBoxInput').prop('checked', true);
                // $('tbody input').prop('checked', false);
            },
            alias: {
                pageNumber: 'pageNum',
                pageSize: 'pageSize'
            }
        });

        if (localStorage.getItem('toLoadPage') !== '1') {
            localStorage.setItem('toLoadPage',1);
        }

        $("#toload").on("click", "#modifyBtn", function () {
            var proId = $(this).parent().siblings(".pro-id-class").html();
            var proContent = $(this).parent().siblings(".pro-content-class").html();
            localStorage.setItem('proId',proId);
            localStorage.setItem('proContent',proContent);
            xadmin.open('修改题目','question-edit.html');
        });
    })
</script>

<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        var form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function (data) {

            if (data.elem.checked) {
                $('tbody input').prop('checked', true);
            } else {
                $('tbody input').prop('checked', false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });



    function delAll(argument) {
        var ids = [];
        // 获取选中的id
        $('tbody input').each(function (index, el) {
            // debugger;
            if ($(this).prop('checked')) {
                ids.push($(this).parents().next().html());
            }
        });

        layer.confirm('确认要删除吗？题目编号为：' + ids.toString(), function (index) {
            //捉到所有被选中的，发异步进行删除
            var data = [];
            data['proIds'] = ids;
            $.ajax({
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                url: hostStr + "problem/batch",
                type: "DELETE",
                data: JSON.stringify(ids),
                dataType: "json",
                success: function (res) {
                    layer.msg('删除成功', {icon: 1});
                    $(".layui-form-checked").not('.header').parents('tr').remove();
                }
            });
        });
    }
</script>
</html>